<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <!--
        所谓的单向绑定，就是，当Vue实例的属性变化时，与Vue实例绑定的模板中的插值表达式也会跟着变！
        所谓的双向绑定：首先包含单向绑定的功能。除此以外，当模板中绑定的Vue的属性值变了，Vue实例的属性也跟着变。

        在Vue中，只有表单元素，才能使用Vue的双向绑定！ 因为表单元素是可以接受用户输入的！

        被加上v-model的表单元素就有双向绑定的效果了！ 且该表单元素术语上叫做： view-model
        MVVM:  model view  view-model 
    -->
    <div id="app">
        {{msg}}
        
        <input type="text" v-model:value="msg">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "东方不败"
            }
        });
    </script>
</body>
</html>